<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/goods/buy_car.css"/>
    <script type="text/javascript">
        (function () {
            var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
            clientWidth = clientWidth || localStorage.getItem("clientWidth")
            if (clientWidth > 750)
                clientWidth = 750;
            document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
        })();
    </script>
</head>

<style>
    .ptsp_top_stats {
        height: 20px;
        width: 100%;
        background-color: #ffffff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
    }

    .mui-bar-nav {
        top: 0;
    }

    .mui-content {
        padding-bottom: 100px;
        padding-top: 44px !important;
    }
</style>

<body>

<div id="app">
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">购物车</h1>
        <a class="mui-pull-right" @click="changeManageModule()" v-html="show_del.text"></a>
    </header>
    <div class="mui-content">
        <div class="shop_list" v-if="goodsGroup">
            <div class="shop_item">
                <!--<div class="title" :data-shop-id="i.shop_id">-->
                <!--<i :class="i.is_checked|is_chekced" @click="select_shop(i.shop_id)"></i>-->
                <!--<span @click="to_page('shop_detail.html')">-->
                <!--<span class="fl"  >{{i.shop_name}}<i class="mui-icon mui-icon-arrowright" style="color: #8a8a8a;font-size:0.7973rem ;"></i></span>-->
                <!--&lt;!&ndash;<b class="fl"></b>&ndash;&gt;-->
                <!--</span>-->
                <!--</div>-->
                <div class="goods_list" v-for="goodsGroupItem in goodsGroup">
                	<p>{{goodsGroupItem.name}}</p>
                    <div class="goods_item" v-for="goodsItem in goodsGroupItem.goods">
                        <i :class="goodsItem.checked ? 'icon icon_checked fl' : 'icon fl'"  @click="selectedCurrentGoods(goodsItem.cartid)"></i>
                        <div class="img fl" @click="go_detail(goodsItem.goodsid)">
                            <img :src="goodsItem.pic" alt="">
                        </div>
                        <div class="info fl">
                            <div class="goods_title" @click="go_detail(goodsItem.goodsid)" v-html="goodsItem.name"></div>
                            <div class="goods_Specifications" v-html="goodsItem.rule"></div>
                            <div class="price" v-html="'￥'+goodsItem.min_price"></div>
                            <div class="cout_box">
                                <span @click="operateGoods({cartid:goodsItem.cartid,type:'0'})">-</span>
                                <span v-html="goodsItem.num">0</span>
                                <span @click="operateGoods({cartid:goodsItem.cartid,type:'1'})">+</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="select_all" v-if="show_del.status">
            <a @click="selectAll()">
                <i :class="isAllChecked ? 'icon icon_checked fl' : 'icon fl'"></i>
                <span>全选</span>
            </a>
            <button @click="deleteGoods()">删除</button>
            <button @click="collectGoods()">移入收藏夹</button>
        </div>
        <div class="select_all" v-if="!show_del.status">
            <a @click="selectAll()">
                <i :class="isAllChecked ? 'icon icon_checked fl' : 'icon fl'"></i>
                <span>全选</span>
            </a>
            <button class="jiesuan" @click="confirmOrder()">结算</button>
            <button class="all_price">合计:
                <span style="color: #ff0000" v-html="'￥'+balance"></span>
            </button>
        </div>
    </div>

    <!--底部菜单-->
    <style type="text/css">
        .mui-bar-tab .mui-tab-item.mui-active {
            color: #888888;
        }

        .bottom_nav_active span {
            color: #1c83fc;
        }
    </style>
    <nav class="mui-bar mui-bar-tab" style="border-top: 1px solid #d6d7dc;top: auto;">
        <a class="mui-tab-item " id='home_tab' href="shop_home.html">
				<span class="mui-icon ">
                <img src="../images/nav_12.png" width="19px;" alt="">
            	</span>
            <span class="mui-tab-label"  style="color: #888888;">首页</span>
        </a>
        <a class="mui-tab-item " id='class_tab' href="select_class.html">
				<span class="mui-icon">
                <img src="../images/nav_03.png" width="19px;" alt="">
            </span>
            <span class="mui-tab-label"  style="color: #888888;">分类</span>
        </a>
        <a class="mui-tab-item " id='shop_tab' href="mingpin.html">
				<span class="mui-icon">
                <img src="../images/nav_05.png" width="19px;" alt="">
            </span>
            <span class="mui-tab-label"  style="color: #888888;">名品商家</span>
        </a>
        <a class="mui-tab-item mui-active  bottom_nav_active" id='car_tab'  >
				<span class="mui-icon">
                <img src="../images/nv_checked_07.png" width="19px;" alt="">
            </span>
            <span class="mui-tab-label" style="color: #1c83fc;">购物车</span>
        </a>
        <!--<a class="mui-tab-item" id='my_tab' href="myshop.html">
				<span class="mui-icon">
                <img src="../images/nav_09.png" width="19px;" alt="">
            </span>
            <span class="mui-tab-label" style="color: #888888;">我的</span>
       </a>--> 
    </nav>
</div>

<!--底部菜单 end-->

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/tools/util.js"></script>
<script src="../js/host.config.js"></script>
<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/logic/buyCar.js" type="text/javascript" charset="utf-8"></script>
<script>
	
	
	/*
	 * 
	 * 
	 
    var app = new Vue({
        el: '#app',
        data: {
            show_del: {
                status: false,
                text: '管理'
            },//是否显示删除面板
            goodsGroup: {}, // 商品集合
            isAllChecked: false,    // 是否全选
            balance: 0,  // 商品价格
        },
        methods: {
            deleteGoods: function () {   // 删除操作
                let cartids = this.findCurrentChecked();
                let _this = this;
                $.get(url + 'api/cart/delete', {cartid: cartids.toString(), uid:this.user.uid}, function (response) {
                    let responseData = JSON.parse(response);
                    if (responseData.code == '1') {
                        let goods = responseData.data;
                        if(goods.length > 0){
                            goods.forEach(function (itemGroup, index) {
                                itemGroup.goods.forEach(function (item, index) {
                                    item.checked = false;
                                });
                            });
                        }
                        _this.goodsGroup = goods;
                        mui.toast('删除成功');
                    }
                });
            },
            collectGoods: function () {   // 收藏
                let goodsid = this.findCurrentCheckedGoodid();
                $.post(url + 'api/Collect/addscollect', {goodsid: goodsid.toString(), uid:this.user.uid}, function (response) {
                    let responseData = JSON.parse(response);
                    if (responseData.code == '1') {
                        mui.toast('收藏成功');
                    }
                });
            },
            selectedCurrentGoods: function (cartid) { // 选中状态切换
                let goods = this.findGoodsByCartId(cartid);
                goods.checked = !goods.checked;
                this.countPrice();
            },
            operateGoods: function ({cartid: cartid, type: type}) { // 商品操作
                let goods = this.findGoodsByCartId(cartid);
                if (type == 0) {  //  减少操作
                    if(goods.num < 2){
                        return false;
                    }
                    $.post(url + 'api/cart/edit', {cartid: cartid, type: 'cut'}, function (response) {
                        let responseData = JSON.parse(response);
                        if (responseData.code == '1') {
                            --goods.num;
                        }
                    });
                } else {  // 增加操作
                    $.post(url + 'api/cart/edit', {cartid: cartid, type: 'plus'}, function (response) {
                        let responseData = JSON.parse(response);
                        if (responseData.code == '1') {
                            ++goods.num;
                        }
                    });
                }
                this.countPrice();
            },
            findGoodsByCartId: function (cartid) {  // 根据CartId:查询商品
                let goodsGroup = this.goodsGroup;
                let result = null;
                goodsGroup.forEach(function (itemGroup, index) {
                    itemGroup.goods.forEach(function (item, index) {
                        if (item.cartid == cartid) {
                            result = item;
                        }
                    });
                });
                return result;
            },
            countPrice: function () {   // 价格统计
                let goodsGroup = this.goodsGroup;
                let count = 0;
                goodsGroup.forEach(function (itemGroup, index) {
                    itemGroup.goods.forEach(function (item, index) {
                        if (item.checked) {
                            count += item.num * item.min_price;
                        }
                    });
                });
                this.balance = count;
            },
            changeManageModule: function () {    // 切换管理模块
                if (this.show_del.status) {
                    // 关闭
                    this.show_del.text = "管理"
                    this.show_del.status = false;
                } else {
                    // 打开
                    this.show_del.text = "完成"
                    this.show_del.status = true;
                }
            },
            selectAll: function () { // 全选
                let goodsGroup = this.goodsGroup;
                let isAllChecked = this.isAllChecked;
                if (isAllChecked) {
                    goodsGroup.forEach(function (itemGroup, index) {
                        itemGroup.goods.forEach(function (item, index) {
                            item.checked = false;
                        });
                    });
                    this.isAllChecked = false;
                } else {
                    goodsGroup.forEach(function (itemGroup, index) {
                        itemGroup.goods.forEach(function (item, index) {
                            item.checked = true;
                        });
                    });
                    this.isAllChecked = true;
                }
                this.countPrice();
            },
            findCurrentChecked: function () {   // 获取当前选中
                let goodsGroup = this.goodsGroup;
                let checkedArr = [];
                goodsGroup.forEach(function (itemGroup, index) {
                    itemGroup.goods.forEach(function (item, index) {
                        if (item.checked) {
                            checkedArr.push(item.cartid);
                        }
                    });
                });
                return checkedArr;
            },
            findCurrentCheckedGoodid: function () { // 获取goodids
                let goodsGroup = this.goodsGroup;
                let goodsids = [];
                goodsGroup.forEach(function (itemGroup, index) {
                    itemGroup.goods.forEach(function (item, index) {
                        if (item.checked) {
                            goodsids.push(item.goodsid);
                        }
                    });
                });
                return goodsids;
            },
            confirmOrder: function () { // 订单结算
                let checkCartids = this.findCurrentChecked();
                if(checkCartids.length <= 0){
                    mui.toast('请选择商品');
                    return false;
                }
                let cartInfo = {
                    cartids: checkCartids,
                    uid:this.user.uid,
                };
                host_config.localStorage.setItem(host_config.cartInfo,JSON.stringify(cartInfo));
                mui.openWindow('confirm_order.html?confirmType=0');
            }
        },
        mounted: function () {
            var _this = this;

            // 加载购物车数据
            let user = host_config.localStorage.user;
            if (user) {
                this.user = JSON.parse(user);
            }
            $.post(url + 'app/Cart/cartLists', {uid: this.user.uid}, function (response) {
                let responseData = JSON.parse(response);
                if (responseData.code == '1') {
                    if(responseData.data.length > 0){
                        let goods = responseData.data;
                        if(goods.length > 0){
                            goods.forEach(function (itemGroup, index) {
                                itemGroup.goods.forEach(function (item, index) {
                                    item.checked = false;
                                });
                            });
                        }
                        _this.goodsGroup = goods;
                    }else{
                        _this.goodsGroup = null;
                    }
                }
            })

        }
    })
    mui('.mui-bar-tab').on('tap', '.mui-tab-item', function () {
        console.log(this.href)
        mui.openWindow(this.href, this.href)
    })
    
    */
</script>
</body>

</html>